<template>
  <div class="field-item">
    <!-- 单行文本 多行文本 -->
    <el-input v-if="inputType.includes(field.fieldType)" v-model="item.targetValue" />
    <!-- 部门 -->
    <deptSelect v-else-if="field.fieldType === 'department'" :isService="isService" :deptList="deptList" :selectMap="selectMap" v-model="item.targetValue" :isCheckbox="true" :multiRow="true" :fieldType="item.fieldType">
    </deptSelect>
    <!-- 单选 多选-->
    <el-select v-model="item.targetValue" v-else-if="field.fieldType === 'radio' || field.fieldType === 'checkbox'" class="width-full" :filterable="true" :multiple="field.fieldType === 'checkbox' ? true : false">
      <template v-for="one in field.options">
        <el-option :key="one.key" v-if="!one.isDelete" :value="one.key" :label="one.value">
        </el-option>
      </template>
    </el-select>
    <!-- 数值 -->
    <el-input v-model="item.targetValue" @blur="blur" ref="field"  :min="field.minNumber" :max="field.maxNumber" v-else-if="field.fieldType === 'number'">
      <template slot="append" v-if="field.unit">{{field.unit}}</template>
    </el-input>
    <!-- 多级下拉 -->
    <el-cascader filterable v-model="item.targetValue" v-else-if="field.fieldType === 'cascadeSelect'" class="width-full" :props="{ value: 'key', label: 'value', checkStrictly: true }" :options="field.cascadeOptions | filterOptions">
    </el-cascader>
    <memberSelect class="width-full" v-if="field.fieldType === 'member'" v-model="item.targetValue" :options="workerList" :isCheckbox="true" :multiRow="true"></memberSelect>
    <regionWrap class="width-full" v-else-if="field.fieldType === 'region'" :field="field" :item="item">
    </regionWrap>
    <el-date-picker v-else-if="field.fieldType === 'dateTime'" style="width: 100%" class="width-full" :value-format="field.dateType === 1 ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'" v-model="item.targetValue" :type="field.dateType === 1 ? 'date' : 'datetime'" :placeholder="field.hint">
	</el-date-picker>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref, Emit, Watch } from 'vue-property-decorator';
import deptSelect from '@/afterSales/views/config/serviceConfig/fieldConfig/form/widget/department/components/deptSelect.vue';
import { CommonModule } from '@/store/modules/common'
import { filterOptions } from '@/afterSales/utils/common';
import regionWrap from './regionWrap.vue';
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore'
import memberSelect from '@/afterSales/views/config/serviceConfig/fieldConfig/form/widget/member/components/memberSelect.vue';
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash'
@Component({
  name: 'fieldItem',
  components: {
    regionWrap,
    deptSelect,
    memberSelect
  },
  filters: {
    filterOptions (options) {
      return filterOptions(cloneDeep(options) || [])
    }
  }
})
export default class extends Vue {
  @Prop({ default: () => ({}) }) public item!: any;
  @Prop({ default: () => ({}) }) public field!: any;
  private inputType = ['text', 'multiText'];
  public blur () {
    if (this.item.targetValue && !isNaN(Number(this.item.targetValue))) {
      this.item.targetValue = Number(this.item.targetValue).toFixed(this.field.decimalPoint);
    }
  }

  private get workerList () {
    const arr = (CommonModule as any).publicCache.userList
    return arr.map(item => {
      return {
        name: `${item.agentName}【${item.agentNumber}】`,
        _id: item._id
      }
    });
  }

  private get deptList () {
    if (this.field.fieldType === 'department') {
      if (this.field.dataType === 2) {
        return (CommonModule as any).publicCache.departmentTree?.tree || []
      } else if (this.field.dataType === 4) {
        return (CommonModule as any).publicCache.queueList
      } else {
        return busConfigStore.serviceList
      }
    } else {
      return []
    }
  }

  private get isService () {
    if (this.field.dataType === 5) {
      return true
    }
    return false
  }

  private get selectMap () {
    if (this.field.fieldType === 'department') {
      if (this.field.dataType === 2) {
        return (CommonModule as any).publicCache.departmentListObj
      } else if (this.field.dataType === 4) {
        return (CommonModule as any).publicCache.queueListObj
      } else {
        return busConfigStore.serviceMap
      }
    } else {
      return {}
    }
  }
}
</script>
<style scoped>
.field-item {
  flex: 1;
}
</style>
